<!-- 受邀页 -->
<template>
	<view class="container" :style="activityJson?.wrapper?.style">
		<view class="form" :style="activityJson?.content?.style">
			<view class="title" :style="activityJson?.content?.title?.style">{{ activityJson?.content?.title?.text }}</view>
			<view class="form-item" :style="activityJson?.content?.input?.style">
				<view class="title">
					<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/d40091c8-3f9e-4d1f-a652-22685a6bb7d5.png"></image>
					<text>姓名</text>
				</view>
				<view class="input">
					<input type="text" placeholder="请输入姓名" v-model="vdata.inviteParams.name">
				</view>
			</view>
			<view class="form-item" :style="activityJson?.content?.input?.style">
				<view class="title">
					<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/5574a48d-d1f0-4619-8239-5dbabc4528f5.png"></image>
					<text>电话</text>
				</view>
				<view class="input">
					<input type="text" placeholder="请输入手机号" v-model="vdata.inviteParams.telphone">
				</view>
			</view>
			<view class="form-item" :style="activityJson?.content?.input?.style">
				<view class="title">
					<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/11c9a01e-d6e5-4d66-8f6c-80fe7942397f.png"></image>
					<text>网点</text>
				</view>
				<view class="input">
					<picker mode="multiSelector" :range="[vdata.countyList,vdata.dotList]" :value="vdata.index" range-key="agentName" @change="onPickerChange" @cancel="onPickerCancel" @columnchange="onPickerColumnChange">
						<view v-if="vdata.agentNoIndex?.length >= 2">{{ vdata.agentList[vdata.agentNoIndex[0]].agentName + '/' + vdata.agentList[vdata.agentNoIndex[0]].children[vdata.agentNoIndex[1]].agentName }}</view>
						<view v-else style="color: #808080;">请选择预约网点</view>
					</picker>
				</view>
			</view>
			<view class="form-item" :style="activityJson?.content?.input?.style">
				<view class="title">
					<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/89898f10-e137-416b-a033-d96e6ff86e9b.png"></image>
					<text>时间</text>
				</view>
				<view class="input">
					<picker mode="date" :value="vdata.date" @change="dateBindPickerChange" :start="dayjs().format('YYYY-MM-DD')">
						<view v-if="vdata.date">{{ vdata.date }}</view>
						<view v-else style="color: #808080;">请选择预约时间</view>
					</picker>
				</view>
			</view>
			<button @click="onSubmit" class="submit" :style="activityJson?.content?.btn?.style" plain>{{ activityJson?.content?.btn?.text }}</button>
		</view>
		
		<!-- <view class="rule">
			<view class="title">新客活动</view>
			<text>预约到郑州邮政代理金融网点进行新开户，即有机会获得50元消费满减券。</text>
		</view> -->
		
	</view>
	
	<!-- 授权登录弹窗 -->
	<gzLoginPopup ref="gzLoginPopupRef" v-model:isLogin="vdata.isLogin" @isLoginCallback="isLoginCallback"></gzLoginPopup>
</template>

<script setup>
	import { ref, reactive, getCurrentInstance } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import storageManage from '@/util/storageManage.js'
	import { $getNearAgentNo, $fansDetail, $confirmSendCoupon } from '@/http/apiManager.js'
	import appConfig from  '@/config/appConfig.js'
	import dayjs from 'dayjs'
	// #ifdef MP-YHDD
	import agents from '@/components/applyJson/agentsCc.json'
	// #endif
	// #ifndef MP-YHDD
	import agents from '@/components/applyJson/agentsZz.json'
	// #endif
	
	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties
	
	// 登录弹框实例
	const gzLoginPopupRef = ref()
	
	// 数据源
	const vdata = reactive({
		isLogin: false,	// 用户是否登录
		inviteParams: {},	// 邀请携带参数
		
		agentNo: '',	// 预约网点
		date: '',	// 预约时间
		// 网点
		agentNoIndex: [],
		index: [],	// 选中的网点下标 (内部滚动重置 列表使用)
		agentList: agents.list,	// 网点列表
		countyList: agents.list,	// 区县列表
		dotList: agents.list[0].children,	// 网点列表
	})
	
	// activityJson
	const activityJson = ref({
		"wrapper":{
			"style":{
				"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/f9a41d57-85ad-488c-8646-081b7e94e811.png') no-repeat center 132rpx / 702rpx 269rpx, url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/b903f1d7-3e8e-4a01-88be-e6d0968dcbab.png') no-repeat left top / 100% 876rpx, #F15148"
			}
		},
		"content":{
			"title":{
				"text":"",
				"style":{
					"width":"281rpx",
					"height":"71rpx",
					"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/a0a11ea9-37d1-401c-a22e-44005b79b836.png') no-repeat left top / 100% 100%"
				}
			},
			"input":{
				"style":{
					"background":"#FFFFFF"
				}
			},
			"btn":{
				"text":"",
				"style":{
					"width":"100%",
					"height":"119rpx",
					"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/064cba76-ddd8-4b7c-83f9-c3a3457ef817.png') no-repeat left top / 100% 100%"
				}
			},
			"style":{
				"background":"#FFF9EE"
			}
		}
	})
	
	onLoad(({ shareParams, invitedJson }) => {
		vdata.isLogin = storageManage.isLogin()
		vdata.inviteParams = JSON.parse(shareParams)
		activityJson.value = JSON.parse(invitedJson || null)
		vdata.inviteParams.userId = storageManage.userId()
		if(vdata.isLogin){	// 如果用户登陆 拉取用户详情 回填姓名手机号
			getUserDetail(storageManage.fansId())
		}
	})
	/**
	 * 登录后回调
	 */
	const isLoginCallback = () => {
		if(vdata.isLogin){	// 如果用户登陆 回填姓名手机号
			vdata.inviteParams.telphone = storageManage.userInfo().phone
			vdata.inviteParams.name = storageManage.userInfo().realName
		}
	}
	/**
	 * 选择归属网点
	 */
	function onPickerChange({ detail }){
		const { value } = detail
		if(JSON.stringify(value) !== JSON.stringify(vdata.agentNoIndex)){
			vdata.agentNoIndex = value
		}
	}
	/**
	 * 取消归属网点选择 列表位置 重置为当前选中的网点
	 */
	function onPickerCancel(e){
		vdata.index = JSON.parse(JSON.stringify(vdata.agentNoIndex))
	}
	/**
	 * 切换第二列
	 */
	function onPickerColumnChange({ detail }){
		const { column, value } = detail
		if(column === 0){
			vdata.dotList = agents.list[value].children
			vdata.index = [value,0]
		}
	}
	/**
	 * 预约网点 选择
	 */
	const agentBindPickerChange = (e) => {
		vdata.agentIndex = e.detail.value
	}
	/**
	 * 预约时间 选择
	 */
	const dateBindPickerChange = (e) => {
		vdata.date = e.detail.value
	}
	/**
	 * 预约网点 回显处理
	 */
	const agentEchoHandle = (agents) => {
		// 数据回显处理
		outer:
		for(let i in vdata.agentList){
			if(vdata.agentList[i].agentNo === agents.gswdPid){
				vdata.agentNoIndex[0] = i
				vdata.index[0] = i
				vdata.dotList = vdata.agentList[i].children
				for(let ii in vdata.agentList[i].children){
					if(vdata.agentList[i].children[ii].agentNo === agents.gswdAgentNo){
						vdata.agentNoIndex[1] = ii
						vdata.index[1] = ii
						break outer;	// 跳出最外层循环
					}
				}
			}
		}
	}
	/**
	 * 拉取用户详情
	 */
	const getUserDetail = (fansId) => {
		if(storageManage.userInfo()){
			vdata.inviteParams.telphone = storageManage.userInfo().phone
			vdata.inviteParams.name = storageManage.userInfo().realName
		}else{
			$fansDetail().then(({ bizData }) => {
				storageManage.userInfo(bizData)
				vdata.inviteParams.telphone = bizData.phone
				vdata.inviteParams.name = bizData.realName
			})
		}
	}
	
	/**
	 * 接受邀约
	 */
	const onSubmit = () => {
		// 判断用户是否登录
		if(!vdata.isLogin){
			gzLoginPopupRef.value.open()
			return
		}
		if(!vdata.inviteParams.name){
			$infoBox.toast('请输入姓名')
			return
		}
		if(!vdata.inviteParams.telphone || !/^(?:(?:\+|00)86)?1\d{10}$/.test(vdata.inviteParams.telphone)){
			$infoBox.toast('请输入正确的手机号')
			return
		}
		// 新增字段
		if(vdata.agentNoIndex?.length < 2){
			$infoBox.toast('请选择预约网点')
			return
		}
		if(!vdata.date){
			$infoBox.toast('请选择预约时间')
			return
		}
		vdata.inviteParams.date = vdata.date
		vdata.inviteParams.agentName = vdata.agentList[vdata.agentNoIndex[0]].children[vdata.agentNoIndex[1]].agentName
		vdata.inviteParams.agentNo = vdata.agentList[vdata.agentNoIndex[0]].children[vdata.agentNoIndex[1]].agentNo
		getApp().preventActive(()=>{
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			$confirmSendCoupon(vdata.inviteParams).then(({ bizData }) => {
				uni.hideLoading()
				$infoBox.successToast('受邀成功',{ duration: 2000 })
				setTimeout(() => {
					// 受邀成功之后 跳转到首页
					uni.switchTab({
						url: `/pages/index/index`
					})
				},2000)
			})
		})
	}
	/**
	 * 请求最近的网点 并用于回显
	 */
	async function getNearAgentNo(lng,lat){
		const { bizData } = await $getNearAgentNo({ lng, lat })
		// 授权定位 使用 最近网点信息
		agentEchoHandle({ gswdPid: bizData.agent.pid, gswdAgentNo: bizData.agent.agentNo })
	}
</script>

<style lang="less" scoped>
	.container{
		overflow: hidden;	// 解决子元素margin影响父元素
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		position: relative;
		padding-bottom: 105rpx;
		background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/f9a41d57-85ad-488c-8646-081b7e94e811.png'), url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/b903f1d7-3e8e-4a01-88be-e6d0968dcbab.png');
		background-repeat: no-repeat;
		background-position: center 132rpx, left top;
		background-size: 702rpx 269rpx, 100% 876rpx;
		background-color: #F04D44;
		.form{
			position: relative;
			padding: 25rpx;
			margin: 618rpx 27rpx 0;
			background: #FFF9EE;
			border-radius: 20rpx;
			&>.title{
				font-weight: 600;
				font-size: 36rpx;
				width: 281rpx;
				height: 71rpx;
				margin: 0 auto 24rpx;
				background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/a0a11ea9-37d1-401c-a22e-44005b79b836.png') no-repeat left top / 100% 100%;
			}
			.form-item{
				display: flex;
				gap: 60rpx;
				align-items: center;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(222,28,0,0.5);
				padding: 24rpx;
				border-radius: 45rpx;
				margin-bottom: 24rpx;
				.title{
					display: flex;
					align-items: center;
					gap: 10rpx;
					image{
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
			.submit{
				border: none;
				padding: initial;
				margin: initial;
				line-height: initial;
				width: 100%;
				height: 119rpx;
				border-radius: 60rpx;
				background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/064cba76-ddd8-4b7c-83f9-c3a3457ef817.png') no-repeat left top / 100% 100%
			}
		}
		
		.rule{
			margin-top: 24rpx;
			background: linear-gradient(45deg, #cce989, #eae690, #e0ea97);
			padding: 24rpx;
			border-radius: 16rpx;
			.title{
				font-weight: bold;
				font-size: 32rpx;
				text-align: center;
				margin-bottom: 24rpx;
			}
		}
	
	}
</style>